<template>
  <view class="home-page">
  <!-- 完整标题栏 -->
  <view class="custom-header" :style="{ height: totalBarHeight + 'px' }">
    <!-- 状态栏区域 -->
    <view class="status-area" :style="{ height: statusBarHeight + 'px' }"></view>
    <!-- 导航栏区域 -->
    <view class="nav-area d-flex align-items-center align-content-center" :style="{ height: navBarHeight + 'px' }">
      <view class="home-position d-flex align-items-center align-content-center">
      <image src="@/static/images/home/icon_location.png" mode="aspectFill"></image>
      <view>{{locationAddress}}</view>
    </view>
    </view>
  </view>
    <view class="home-logo"></view>
    <search-bar placeholder="搜索手机型号" @search="handleSearch" />
      <category-navigation :navigate-items="navigate" />
      <current-device 
      v-if="showProductInfo && showProductInfo.productId"
      :device-info="showProductInfo" @change-device="handleChangeDevice"
      @handle-device="handleDevice"
      />
      <advertisement-banner :banner="banner"/>
      <why-choose-us :features="loopData0" />
      <!-- <user-reviews :reviews="userReviews" /> -->
      <bottom-nav type='home' />
</view>
</template>

<script>
import { mapGetters } from 'vuex'

import CategoryNavigation from './components/CategoryNavigation.vue'
import UserReviews from './components/UserReviews.vue'
import WhyChooseUs from './components/WhyChooseUs.vue'
import BottomNavigation from './components/BottomNavigation.vue'
import CurrentDevice from './components/CurrentDevice.vue'
import SearchBar from './components/SearchBar.vue'
import AdvertisementBanner from './components/AdvertisementBanner.vue'
export default {
  components: {
    CategoryNavigation,
    UserReviews,
    WhyChooseUs,
    BottomNavigation,
    CurrentDevice,
    SearchBar,
    AdvertisementBanner
  },
  computed: {
    ...mapGetters([
      'location', 'userInfo', 'systemInfo', 'geoLocation'
    ]),
    // 获取状态栏高度
    statusBarHeight() {
      return this.systemInfo.statusBarHeight || 0;
    },
    // 获取导航栏高度
    navBarHeight() {
      return 44; // 导航栏固定高度
    },
    // 获取完整标题栏高度（状态栏 + 导航栏）
    totalBarHeight() {
      return this.statusBarHeight + this.navBarHeight;
    }
  },
  data() {
    return {
      loopData0: [

      ],
      loopData1: new Array(1).fill({}),
      navItems: [
      ],
      currentDevice: {
        
      },
      scrollHeight: 0,
      banner: [
            {
                "bannerId": 100086,
                "bannerName": "上门回收",
                "positionId": 200026,
                "positionName": "首页大焦点图",
                "image": "https://image.chushouya.com/upload/20250909/1757380448586_wp0vrv.png",
                "color": null,
                "routeType": 1,
                "target": "/pages/category/index",
                "sort": 50,
                "startTime": "2025-09-01 00:00:00",
                "endTime": "2026-10-31 00:00:00",
                "platform": "MP-WEIXIN"
            },
            {
                "bannerId": 100085,
                "bannerName": "秒打款",
                "positionId": 200026,
                "positionName": "首页大焦点图",
                "image": "https://image.chushouya.com/upload/20250909/1757380419777_aw2qxp.png",
                "color": null,
                "routeType": 1,
                "target": "/pages/category/index",
                "sort": 50,
                "startTime": "2025-09-01 00:00:00",
                "endTime": "2026-10-31 00:00:00",
                "platform": "MP-WEIXIN"
            },
            {
                "bannerId": 100084,
                "bannerName": "售后无忧",
                "positionId": 200026,
                "positionName": "首页大焦点图",
                "image": "https://image.chushouya.com/upload/20250909/1757381320965_2wukvb.png",
                "color": null,
                "routeType": 1,
                "target": "/pages/category/index",
                "sort": 50,
                "startTime": "2025-09-01 00:00:00",
                "endTime": "2026-10-31 00:00:00",
                "platform": "MP-WEIXIN"
            }
        ],
      article: [],
      navigate: [
            {
                "bannerId": 100069,
                "bannerName": "手机",
                "positionId": 200004,
                "positionName": "首页金刚位",
                "image": "https://image.chushouya.com/assets/images/home/icon_sj.png",
                "color": null,
                "routeType": 1,
                "target": "/pages/category/index?categoryId=100001",
                "sort": 1,
                "startTime": "2025-06-24 00:00:00",
                "endTime": "2026-06-24 00:00:00",
                "platform": null
            },
            {
                "bannerId": 100070,
                "bannerName": "平板",
                "positionId": 200004,
                "positionName": "首页金刚位",
                "image": "https://image.chushouya.com/assets/images/home/icon_pb.png",
                "color": null,
                "routeType": 1,
                "target": "/pages/category/index?categoryId=100002",
                "sort": 2,
                "startTime": "2025-06-24 00:00:00",
                "endTime": "2026-06-24 00:00:00",
                "platform": null
            },
            {
                "bannerId": 100071,
                "bannerName": "笔记本",
                "positionId": 200004,
                "positionName": "首页金刚位",
                "image": "https://image.chushouya.com/assets/images/home/icon_bjb.png",
                "color": null,
                "routeType": 1,
                "target": "/pages/category/index?categoryId=100004",
                "sort": 3,
                "startTime": "2025-06-24 00:00:00",
                "endTime": "2026-06-24 00:00:00",
                "platform": null
            },
            {
                "bannerId": 100072,
                "bannerName": "相机",
                "positionId": 200004,
                "positionName": "首页金刚位",
                "image": "https://image.chushouya.com/assets/images/home/icon_xj.png",
                "color": null,
                "routeType": 1,
                "target": "/pages/category/index?categoryId=100003",
                "sort": 4,
                "startTime": "2025-06-24 00:00:00",
                "endTime": "2026-06-24 00:00:00",
                "platform": null
            },
            {
                "bannerId": 100073,
                "bannerName": "旧衣服",
                "positionId": 200004,
                "positionName": "首页金刚位",
                "image": "https://image.chushouya.com/assets/images/home/icon_jyf.png",
                "color": null,
                "routeType": 1,
                "target": "/pages/category/index",
                "sort": 5,
                "startTime": "2025-06-24 00:00:00",
                "endTime": "2026-06-24 00:00:00",
                "platform": null
            },
            {
                "bannerId": 100074,
                "bannerName": "游戏机",
                "positionId": 200004,
                "positionName": "首页金刚位",
                "image": "https://image.chushouya.com/assets/images/home/icon_yxj.png",
                "color": null,
                "routeType": 1,
                "target": "/pages/category/index?categoryId=100007",
                "sort": 6,
                "startTime": "2025-06-24 00:00:00",
                "endTime": "2026-06-24 00:00:00",
                "platform": null
            },
            {
                "bannerId": 100077,
                "bannerName": "智能手表",
                "positionId": 200004,
                "positionName": "首页金刚位",
                "image": "https://image.chushouya.com/assets/images/home/icon_sb.png",
                "color": null,
                "routeType": 1,
                "target": "/pages/category/index?categoryId=100012",
                "sort": 7,
                "startTime": "2025-06-24 00:00:00",
                "endTime": "2026-06-24 00:00:00",
                "platform": null
            },
            {
                "bannerId": 100078,
                "bannerName": "寄存回收",
                "positionId": 200004,
                "positionName": "首页金刚位",
                "image": "https://image.chushouya.com/assets/images/home/icon_jchs.png",
                "color": null,
                "routeType": 0,
                "target": "/pages/category/index",
                "sort": 8,
                "startTime": "2025-06-24 00:00:00",
                "endTime": "2026-06-24 00:00:00",
                "platform": null
            }
        ],
      doorServiceList: [],
      userReviews: [
            {
                "id": 13,
                "avatar": "https://image.chushouya.com/assets/images/home/img_head2.png",
                "rating": 4.6,
                "comment": "首次尝试回收服务，没想到这么方便，上门取货只用了半个小时就完成了。",
                "likes": 40,
                "user_name": "张三",
                "phone_model": "OPPO Reno 10",
                "recovery_price": 1912,
                "created_at": "2025-09-12 10:29:56"
            },
            {
                "id": 7,
                "avatar": "https://image.chushouya.com/assets/images/home/img_head1.png",
                "rating": 4.6,
                "comment": "回收人员非常专业，对我的旧手机做了详细的评估，给出的价格很满意。",
                "likes": 25,
                "user_name": "小杰",
                "phone_model": "iPhone 13",
                "recovery_price": 1590,
                "created_at": "2025-09-10 13:08:56"
            },
            {
                "id": 6,
                "avatar": "https://image.chushouya.com/assets/images/home/img_head2.png",
                "rating": 4.7,
                "comment": "回收人员非常专业，对我的旧手机做了详细的评估，给出的价格很满意。",
                "likes": 20,
                "user_name": "小强",
                "phone_model": "Xiaomi Mix 4",
                "recovery_price": 884,
                "created_at": "2025-09-09 04:28:56"
            },
            {
                "id": 11,
                "avatar": "https://image.chushouya.com/assets/images/home/img_head2.png",
                "rating": 4.8,
                "comment": "收到了好评价，回收速度很快，上门服务很贴心。",
                "likes": 42,
                "user_name": "赵六",
                "phone_model": "Xiaomi 12",
                "recovery_price": 1001,
                "created_at": "2025-09-08 23:29:56"
            },
            {
                "id": 14,
                "avatar": "https://image.chushouya.com/assets/images/home/img_head2.png",
                "rating": 5.0,
                "comment": "本来以为废旧手机没什么价值了，没想到还能换到这么多钱。",
                "likes": 47,
                "user_name": "小杰",
                "phone_model": "Xiaomi 13",
                "recovery_price": 1541,
                "created_at": "2025-09-08 08:49:56"
            },
            {
                "id": 9,
                "avatar": "https://image.chushouya.com/assets/images/home/img_head2.png",
                "rating": 4.9,
                "comment": "高于市场行情的回收价，实在是太划算了！",
                "likes": 13,
                "user_name": "朱十",
                "phone_model": "Huawei Mate 50",
                "recovery_price": 2618,
                "created_at": "2025-09-07 16:59:56"
            },
            {
                "id": 1,
                "avatar": "https://image.chushouya.com/assets/images/home/img_head2.png",
                "rating": 4.9,
                "comment": "真的太方便了，不用自己跑去卖，上门来取，还带现金，喜欢这种服务方式。",
                "likes": 27,
                "user_name": "小明",
                "phone_model": "vivo iQOO 9",
                "recovery_price": 1986,
                "created_at": "2025-09-07 05:24:56"
            },
            {
                "id": 15,
                "avatar": "https://image.chushouya.com/assets/images/home/img_head2.png",
                "rating": 4.6,
                "comment": "回收价格是我已经问了好几家最高的了，下次还会来！",
                "likes": 13,
                "user_name": "小爱",
                "phone_model": "Huawei Mate 50",
                "recovery_price": 2831,
                "created_at": "2025-09-05 12:09:56"
            },
            {
                "id": 18,
                "avatar": "https://image.chushouya.com/assets/images/home/img_head2.png",
                "rating": 4.5,
                "comment": "回收价格是我已经问了好几家最高的了，下次还会来！",
                "likes": 44,
                "user_name": "小爱",
                "phone_model": "iPhone X",
                "recovery_price": 1028,
                "created_at": "2025-09-05 09:32:56"
            },
            {
                "id": 5,
                "avatar": "https://image.chushouya.com/assets/images/home/img_head2.png",
                "rating": 4.9,
                "comment": "真的太方便了，不用自己跑去卖，上门来取，还带现金，喜欢这种服务方式。",
                "likes": 39,
                "user_name": "赵六",
                "phone_model": "OPPO Find X3",
                "recovery_price": 1725,
                "created_at": "2025-09-05 03:32:56"
            },
            {
                "id": 12,
                "avatar": "https://image.chushouya.com/assets/images/home/img_head2.png",
                "rating": 4.6,
                "comment": "本来以为废旧手机没什么价值了，没想到还能换到这么多钱。",
                "likes": 11,
                "user_name": "小丽",
                "phone_model": "OPPO Find X3",
                "recovery_price": 723,
                "created_at": "2025-09-05 03:14:56"
            },
            {
                "id": 3,
                "avatar": "https://image.chushouya.com/assets/images/home/img_head1.png",
                "rating": 4.8,
                "comment": "回收价格是我已经问了好几家最高的了，下次还会来！",
                "likes": 2,
                "user_name": "小爱",
                "phone_model": "vivo NEX 3",
                "recovery_price": 1399,
                "created_at": "2025-09-04 23:54:56"
            },
            {
                "id": 19,
                "avatar": "https://image.chushouya.com/assets/images/home/img_head1.png",
                "rating": 4.9,
                "comment": "流程非常规范，身份验证、合同签订都很正规，让人很放心。",
                "likes": 16,
                "user_name": "小丽",
                "phone_model": "iPhone 12",
                "recovery_price": 4716,
                "created_at": "2025-08-31 02:26:56"
            },
            {
                "id": 10,
                "avatar": "https://image.chushouya.com/assets/images/home/img_head1.png",
                "rating": 4.7,
                "comment": "收到了好评价，回收速度很快，上门服务很贴心。",
                "likes": 42,
                "user_name": "小芳",
                "phone_model": "OPPO Find X5",
                "recovery_price": 1358,
                "created_at": "2025-08-26 05:36:56"
            },
            {
                "id": 16,
                "avatar": "https://image.chushouya.com/assets/images/home/img_head2.png",
                "rating": 4.6,
                "comment": "这家平台做得真不错，可以收废旧手机，还能保护环境，非常赞赏。",
                "likes": 35,
                "user_name": "朱十",
                "phone_model": "Huawei Mate 50",
                "recovery_price": 1808,
                "created_at": "2025-08-25 04:42:56"
            },
            {
                "id": 20,
                "avatar": "https://image.chushouya.com/assets/images/home/img_head1.png",
                "rating": 4.6,
                "comment": "真的太方便了，不用自己跑去卖，上门来取，还带现金，喜欢这种服务方式。",
                "likes": 50,
                "user_name": "李四",
                "phone_model": "Huawei Mate 50",
                "recovery_price": 1373,
                "created_at": "2025-08-22 22:45:56"
            },
            {
                "id": 8,
                "avatar": "https://image.chushouya.com/assets/images/home/img_head2.png",
                "rating": 4.6,
                "comment": "收到了好评价，回收速度很快，上门服务很贴心。",
                "likes": 29,
                "user_name": "小芳",
                "phone_model": "iPhone 11",
                "recovery_price": 1699,
                "created_at": "2025-08-22 18:29:56"
            },
            {
                "id": 2,
                "avatar": "https://image.chushouya.com/assets/images/home/img_head2.png",
                "rating": 4.7,
                "comment": "这家平台做得真不错，可以收废旧手机，还能保护环境，非常赞赏。",
                "likes": 36,
                "user_name": "王五",
                "phone_model": "Huawei P40",
                "recovery_price": 2549,
                "created_at": "2025-08-20 14:44:56"
            },
            {
                "id": 4,
                "avatar": "https://image.chushouya.com/assets/images/home/img_head2.png",
                "rating": 4.5,
                "comment": "流程非常规范，身份验证、合同签订都很正规，让人很放心。",
                "likes": 2,
                "user_name": "李四",
                "phone_model": "Huawei P30",
                "recovery_price": 2231,
                "created_at": "2025-08-20 14:04:56"
            },
            {
                "id": 17,
                "avatar": "https://image.chushouya.com/assets/images/home/img_head1.png",
                "rating": 4.9,
                "comment": "本来以为废旧手机没什么价值了，没想到还能换到这么多钱。",
                "likes": 21,
                "user_name": "小杰",
                "phone_model": "OPPO Reno 10",
                "recovery_price": 1563,
                "created_at": "2025-08-19 18:59:56"
            }
        ],
      locationAddress:'深圳市',
      showProductInfo: {
        "fromText": "本机",
        "productId": 100016,
        "productName": "苹果 iPhone 13",
        "productImage": "https://image.chushouya.com/uploads/file/20231018/a9698443810016975145.jpg",
        "evaluatePrice": 2650.00
      }
    }
  },
  // 页面加载时调用
  onLoad() {
    this.getLocation();
    this.loadHome()
  },
  onShow() {
    // Removed loadProductEvaluateInfo since mixins was removed
  },
	onShareAppMessage() {
		return {
			title: '出手鸭',
			path: '/pages/index/index',
		}
	},
	onShareTimeline() {
		return {
			title: '出手鸭',
		}
	},

  methods: {

    // 处理更换机型事件
    handleChangeDevice() {
      // 这里添加更换机型的逻辑
      uni.navigateTo({
        url: '/pages/category/index'
      })
    },
    // 处理设备回收事件
    handleDevice() {
      // 这里添加设备回收的逻辑
      uni.navigateTo({
        url: '/pages/product/index?id=' + this.showProductInfo.productId
      })
    },

    // 处理搜索事件
    handleSearch() {
      // 跳转到搜索页面或者显示搜索结果
      uni.navigateTo({
        url: '/pages/search/index'
      })
    },
  }
}
</script>

<style>
/* 完整标题栏容器 */
.custom-header {
  z-index: 9999;
  width: 100%;
}

/* 状态栏区域 */
.status-area {
  width: 100%;
}

/* 导航栏区域 */
.nav-area {
  width: 100%;
}

.home-page {
  background-color: rgba(246, 247, 249, 1);
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: url(https://image.chushouya.com/assets/images/home/img_bg.png) no-repeat top,#F7F7F7;
  background-size: 100% 680rpx,100% 100%;
  padding: 0rpx 32rpx 148rpx;
}

.home-position {
  height: 56rpx;
  width: fit-content;
  padding: 0 20rpx;
  border-radius: 32rpx;
  border: 2rpx solid rgba(0,0,0,0.08);
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  color: #333333;
}

.home-position image {
  width: 32rpx;
  height: 32rpx;
  margin-right: 4rpx;
}
.home-logo {
  width: 406rpx;
  height: 60rpx;
  background: url(https://image.chushouya.com/assets/images/home/home_logo.png) no-repeat;
  background-size: 406rpx;
  margin-top: 24rpx;
}
</style>